import React from "react";
import { Button, Input, Form, Select, Checkbox, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import intl from 'react-intl-universal';
import $ from 'jquery';


const { Option } = Select;

const layout = { labelCol: { span: 8, }, wrapperCol: { span: 16, }, };
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
        phone: '${label} is not a valid phone!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
/* eslint-enable no-template-curly-in-string */

const AddUserModal = (props) => {

    const onFinishAdd = (value) => {
        console.log('value', value)
        $.ajax({
            url: '/home/user/add',
            type: 'post',
            data: value,
            traditional: true,
            dataType: 'json',
            success: function (result) {
                if (result.status === 1) {
                    props.setHasChange(true);
                    props.hideModal();
                    message.success(intl.get('succeedToAdd'), 3);
                } else {
                    message.info(intl.get('failedToAdd'));
                }
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        })
    };


    return (
        
        <Form {...layout} name="nest-messages" onFinish={onFinishAdd} validateMessages={validateMessages} 
        initialValues={{'roles': props.defaultValue}}>  {/*initialValues用于在查看角色成员页面添加用户，此时默认用户的角色*/}
            <Form.Item name={'username'} label={intl.get('UsernameLabel')} rules={[{ required: true, max: 32 },]}>
                <Input />
            </Form.Item>
            <Form.Item name={'password'} label={intl.get('PasswordLabel')} rules={[{ required: true },]}>
                <Input.Password iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} />
            </Form.Item>
            <Form.Item name={'name'} label={intl.get('NameLabel')} rules={[{ max: 32, },]}>
                <Input />
            </Form.Item>
            <Form.Item name={'phone'} label={intl.get('PhoneLabel')} rules={[{ pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/, message: 'Phone is not a valid phone!' }]}>
                <Input />
            </Form.Item>
            <Form.Item name={'email'} label={intl.get('EmailLabel')} rules={[{ type: 'email', },]}>
                <Input />
            </Form.Item>
            <Form.Item name={'gender'} label={intl.get('GenderLabel')}>
                <Select placeholder="select your gender">
                    <Option value="男">{intl.get('male')}</Option>
                    <Option value="女">{intl.get('female')}</Option>
                    <Option value="无">{intl.get('none')}</Option>
                </Select>
            </Form.Item>
            <Form.Item name={'description'} label={intl.get('IntroductionLabel')}>
                <Input.TextArea />
            </Form.Item>
            {/*Checkbox.Group的disable用于在查看角色成员页面添加用户，此时默认用户的角色*/}
            {/*Form.Item中只能包裹一个input，且注释也不能包括，否则会有warning，导致设置的默认值无效 */}
            <Form.Item name={'roles'} label={intl.get('RolesLabel')}>
                <Checkbox.Group options={props.roleOptions} disabled={props.disabled} />    
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                <Button type="primary" htmlType="submit" className="updateUserSubmit">{intl.get('submit')}</Button>
            </Form.Item>
        </Form>
    );
};

export default AddUserModal;